// 页面导航系统 - 修复版
document.addEventListener('DOMContentLoaded', function() {
    // 初始化页面过渡
    initPageTransitions();
    
    // 设置导航链接点击事件
    setupNavLinks();
    
    // 处理浏览器前进/后退
    window.addEventListener('popstate', handlePopState);
});

// 初始化页面过渡效果
function initPageTransitions() {
    const transitionElement = document.querySelector('.page-transition');
    if (transitionElement) {
        // 页面加载完成后立即隐藏过渡效果
        transitionElement.style.transform = 'scaleY(0)';
        transitionElement.style.transition = 'transform 0.5s ease-in-out';
    }
}

// 设置导航链接
function setupNavLinks() {
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetPage = this.getAttribute('href');
            navigateTo(targetPage);
        });
    });
}

// 导航到指定页面
function navigateTo(pageUrl) {
    const transitionElement = document.querySelector('.page-transition');
    
    // 显示过渡效果
    transitionElement.style.transform = 'scaleY(1)';
    
    // 延迟加载新页面
    setTimeout(() => {
        fetch(pageUrl)
            .then(response => response.text())
            .then(html => {
                // 使用DOMParser解析HTML
                const parser = new DOMParser();
                const newDocument = parser.parseFromString(html, 'text/html');
                
                // 替换整个body内容（除了过渡元素）
                const oldBody = document.body;
                const newBody = newDocument.body;
                
                // 保留过渡元素
                const transitionElement = oldBody.querySelector('.page-transition');
                
                // 创建新的body内容
                const newBodyContent = document.createElement('div');
                newBodyContent.innerHTML = newBody.innerHTML;
                
                // 替换body内容
                oldBody.innerHTML = '';
                oldBody.appendChild(transitionElement);
                oldBody.appendChild(newBodyContent);
                
                // 更新导航菜单活动状态
                updateNavActiveState(pageUrl);
                
                // 重新绑定事件
                rebindPageEvents();
                
                // 更新浏览器历史记录
                window.history.pushState({ page: pageUrl }, '', pageUrl);
                
                // 隐藏过渡效果
                setTimeout(() => {
                    transitionElement.style.transform = 'scaleY(0)';
                }, 50);
            })
            .catch(error => {
                console.error('Error loading page:', error);
                // 如果出错，仍然隐藏过渡效果
                transitionElement.style.transform = 'scaleY(0)';
                // 直接跳转到目标页面作为备用方案
                window.location.href = pageUrl;
            });
    }, 500);
}

// 处理浏览器前进/后退
function handlePopState(event) {
    if (event.state && event.state.page) {
        navigateTo(event.state.page);
    }
}

// 更新导航菜单活动状态
function updateNavActiveState(pageUrl) {
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => {
        if (link.getAttribute('href') === pageUrl) {
            link.classList.add('active');
        } else {
            link.classList.remove('active');
        }
    });
}

// 重新绑定页面事件
function rebindPageEvents() {
    // 重新绑定音乐控制按钮
    if (window.musicPlayer) {
        const toggleBtn = document.getElementById('musicToggle');
        if (toggleBtn) {
            toggleBtn.addEventListener('click', () => window.musicPlayer.togglePlayback());
        }
    }
    
    // 重新绑定表白页面的按钮事件
    if (document.querySelector('.heart-btn')) {
        document.querySelector('.heart-btn').addEventListener('click', function() {
            if (window.createHeartExplosion) createHeartExplosion();
            if (window.showHiddenMessage) showHiddenMessage();
        });
    }
    
    // 重新绑定首页的开始按钮事件
    if (document.getElementById('startJourney')) {
        document.getElementById('startJourney').addEventListener('click', function() {
            navigateTo('memories.html');
        });
    }
    
    // 重新绑定互动选择按钮事件
    const choiceButtons = document.querySelectorAll('.choice-btn');
    choiceButtons.forEach(button => {
        button.addEventListener('click', function() {
            const response = this.getAttribute('data-response');
            if (window.showResponseModal) showResponseModal(response);
        });
    });
    
    // 重新绑定模态框关闭按钮事件
    if (document.getElementById('closeModal')) {
        document.getElementById('closeModal').addEventListener('click', function() {
            document.getElementById('responseModal').style.display = 'none';
        });
    }
    
    // 重新绑定画廊缩略图点击事件
    if (document.querySelector('.timeline-photos')) {
        initGallery();
    }
}

// 暴露导航函数给全局
window.navigateTo = navigateTo;